<template>
	<view>
		<view class="header_bt_01">
			<image :src="userinfo.userImg" class="hander_tx"></image>
			<uni-search-bar class="uni-mt-10" style="color: #f3f3f3;" bgColor="#F8F8F8" radius="100"
				placeholder="搜索相关内容" clearButton="auto" cancelButton="auto" @confirm="search" />
		</view>
		<view class="Run_1" style="margin-top: 120rpx;border-radius: 200rpx;">
			<view class="Run_1_1" :class="GreadId===0?'head_Gle':''" @click="OnquAndmai(0)">
				<text class="Run_2">全部</text>
			</view>

			<view class="Run_1_2" :class="GreadId===1?'head_Gle':''" @click="OnquAndmai(1)">
				<text class="Run_3">闲置</text>
			</view>
			<view class="Run_1_2" :class="GreadId===2?'head_Gle':''" @click="OnquAndmai(2)">
				<text class="Run_3">寻物</text>
			</view>
		</view>
		<!-- 全部-->
		<view style="margin-top: 120rpx;" v-if="GreadId===0">
			<!-- 相关内容 -->
			<uni-group mode="card" v-for="(item,i) in LostFountList" :key="i">
				<view class="uni_bottor_xz">
					<!--闲置模块内1功能区 -->
					<view class="uni_bottor_xz_1">
						<!--闲置模块内2功能区 头像 昵称 时间 购买 -->
						<view class="uni_bottor_xz_2">
							<!--头像 -->
							<text class="uniBt_tx1" v-if="item.type===1"><text
									style="position: absolute;left: 20rpx;top: 8rpx;">寻</text></text>
							<text class="uniBt_tx2" v-if="item.type===2"><text
									style="position: absolute;left: 20rpx;top: 8rpx;">拾</text></text>
							<text class="uniBt_tx3" v-if="item.type===3"><text
									style="position: absolute;left: 20rpx;top: 9rpx;">闲</text></text>
							<!--昵称 -->
							<text class="uniBt_Name">{{ item.userName }}</text>
							<!--发布时间 -->
							<text class="uniBt_Time">{{ item.Ftime }}</text>
							<!--右侧按钮 -->
							<!-- <button class="uniBt_but" type="warn" size="mini" v-if="item.type===1"
								@click="onIphoneint(item.phone)">联系方式</button>
							<button class="uniBt_but" style="background-color: #1ABC9C;" v-if="item.type===2"
								type="warn" size="mini" @click="onIphoneint(item.phone)">联系方式</button> -->
						</view>
					</view>
				</view>
				<!--闲置模块内3 外围边框灰底 -->
				<uni-group mode="card" top=60>
					<!-- 闲置-->
					<view class="uni_bottor_xz_4" v-if="item.type<=2">
						<!--闲置模块内55 功能区 标题 介绍 右侧图片 价格 -->
						<text class="wPname" :style="item.type===1?'color: #D9001B;':'color: #1ABC9C;'">物品名:</text>
						<text class="nuiBt_title">{{ item.title}}</text>
						<text class="Wpxq" :style="item.type===1?'color: #D9001B;':'color: #1ABC9C;'">详情:</text>
						<text class="nuiBt_text" space=nbsp>{{ item.text }}</text>
						<!-- <image class="nuiBt_img" :src="item.lostImg"></image> -->
						<view class="nuiBt_img">
							<svideo style="width: 120px;" :height="height" :data="item.lostImg"></svideo>
						</view>
					</view>
					<view class="uni_bottor_xz_4" v-else style="height: 150px;">
						<!--闲置模块内55 功能区 标题 介绍 右侧图片 价格 -->
						<text class="wPname bor1">好东西自用，毕业便宜甩</text>
						<text class="Wpxq bor2">￥29.9</text>
						<text class="bor3">喜欢0·浏览15</text>
						<view class="nuiBt_img">
							<svideo style="width: 120px;" :height="height" :data="item.lostImg"></svideo>
						</view>
					</view>
				</uni-group>
				<button class="BjBunn2" @click="Bjtext(item)" size="mini">编辑</button>
				<button class="BjBunn1" @click="deltext(item)" size="mini">删除</button>
			</uni-group>
		</view>
		<!-- 闲置-->
		<view style="margin-top: 120rpx;" v-if="GreadId===1">
			<!-- 相关内容 -->
			<uni-group mode="card" v-for="(item,i) in LostFountList" :key="i" v-if="item.type===3">
				<view class="uni_bottor_xz">
					<!--闲置模块内1功能区 -->
					<view class="uni_bottor_xz_1">
						<!--闲置模块内2功能区 头像 昵称 时间 购买 -->
						<view class="uni_bottor_xz_2">
							<!--头像 -->
							<text class="uniBt_tx3" v-if="item.type===3"><text
									style="position: absolute;left: 20rpx;top: 9rpx;">闲</text></text>
							<!--昵称 -->
							<text class="uniBt_Name">{{ item.userName }}</text>
							<!--发布时间 -->
							<text class="uniBt_Time">{{ item.Ftime }}</text>
						</view>
					</view>
				</view>
				<!--闲置模块内3 外围边框灰底 -->
				<uni-group mode="card" top=60>
					<view class="uni_bottor_xz_4" style="height: 150px;">
						<!--闲置模块内55 功能区 标题 介绍 右侧图片 价格 -->
						<text class="wPname bor1">好东西自用，毕业便宜甩</text>
						<text class="Wpxq bor2">￥29.9</text>
						<text class="bor3">喜欢0·浏览15</text>
						<view class="nuiBt_img">
							<svideo style="width: 120px;" :height="height" :data="item.lostImg"></svideo>
						</view>
					</view>
				</uni-group>
				<button class="BjBunn2" @click="Bjtext(item)" size="mini">编辑</button>
				<button class="BjBunn1" @click="deltext(item)" size="mini">删除</button>
			</uni-group>
		</view>
		<!-- 寻物-->
		<view style="margin-top: 120rpx;" v-if="GreadId===2">
			<!-- 相关内容 -->
			<uni-group mode="card" v-for="(item,i) in LostFountList" :key="i" v-if="item.type!=3">
				<view class="uni_bottor_xz">
					<!--闲置模块内1功能区 -->
					<view class="uni_bottor_xz_1">
						<!--闲置模块内2功能区 头像 昵称 时间 购买 -->
						<view class="uni_bottor_xz_2">
							<!--头像 -->
							<text class="uniBt_tx1" v-if="item.type===1"><text
									style="position: absolute;left: 20rpx;top: 8rpx;">寻</text></text>
							<text class="uniBt_tx2" v-if="item.type===2"><text
									style="position: absolute;left: 20rpx;top: 8rpx;">拾</text></text>
							<!--昵称 -->
							<text class="uniBt_Name">{{ item.userName }}</text>
							<!--发布时间 -->
							<text class="uniBt_Time">{{ item.Ftime }}</text>
							<!--右侧按钮 -->
							<!-- <button class="uniBt_but" type="warn" size="mini" v-if="item.type===1" -->
								<!-- @click="onIphoneint(item.phone)">联系方式</button> -->
							<!-- <button class="uniBt_but" style="background-color: #1ABC9C;" v-if="item.type===2" -->
								<!-- type="warn" size="mini" @click="onIphoneint(item.phone)">联系方式</button> -->
						</view>
					</view>
				</view>
				<!--闲置模块内3 外围边框灰底 -->
				<uni-group mode="card" top=60>
					<!-- 闲置-->
					<view class="uni_bottor_xz_4" v-if="item.type<=2">
						<!--闲置模块内55 功能区 标题 介绍 右侧图片 价格 -->
						<text class="wPname" :style="item.type===1?'color: #D9001B;':'color: #1ABC9C;'">物品名:</text>
						<text class="nuiBt_title">{{ item.title}}</text>
						<text class="Wpxq" :style="item.type===1?'color: #D9001B;':'color: #1ABC9C;'">详情:</text>
						<text class="nuiBt_text" space=nbsp>{{ item.text }}</text>
						<!-- <image class="nuiBt_img" :src="item.lostImg"></image> -->
						<view class="nuiBt_img">
							<svideo style="width: 120px;" :height="height" :data="item.lostImg"></svideo>
						</view>
					</view>
				</uni-group>
				<button class="BjBunn2" @click="Bjtext(item)" size="mini">编辑</button>
				<button class="BjBunn1" @click="deltext(item)" size="mini">删除</button>
			</uni-group>
		</view>
		<view style="padding:5px 0px 20px 0px;" v-if="Fwsum>=3">
			<uni-load-more color="#007AFF" :status="status" iconType="auto" />
		</view>
		<view style="height: 50px;">
		
		</view>
		
		<!-- 寻物详细模板 -->
	</view>
</template>

<script>
	import svideo from '@/components/s-video/s-video.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			svideo
		},
		computed: {
			// 将 m_user 模块中的 userinfo 映射到当前页面中使用
			...mapState('m_user', ['userinfo']),
		},
		data() {
			return {
				GreadId: 0,
				status: 'more', //动态加载状态
				pageNum: 1, //当前加载页数
				Fwsum: 0, //计算区域内订单的数里
				//校园状态显示数据集合
				LostFountList: [{
						no: "159862155615",
						userName: "淡淡一笑",
						phone: '13712345678',
						Ftime: "2022年4月8日 18:34",
						type: 1,
						title: "校园卡",
						text: '在第三食堂丢失了一张校园卡，同学们如果有拾取，请及时联系我谢谢！',
						lostImg: [
							'http://124.222.72.174:8008/images/二手转卖展示页-Sh_resale/构建之法.jpg',
							'http://124.222.72.174:8008/images/二手转卖展示页-Sh_resale/构建之法.jpg',
							'http://124.222.72.174:8008/images/二手转卖展示页-Sh_resale/构建之法.jpg',
						]
					},
					{
						no: "1598621232315",
						userName: "佳佳",
						phone: '13559453225',
						Ftime: "2022年4月9日 18:34",
						type: 2,
						title: "羽绒服1",
						text: '在东操主席台前，捡到一件耐克的羽绒服，如果有同学丢失，请及时联系我！',
						lostImg: [
							'http://124.222.72.174:8008/images/二手转卖展示页-Sh_resale/构建之法.jpg',
							'http://124.222.72.174:8008/images/二手转卖展示页-Sh_resale/构建之法.jpg',
							'http://124.222.72.174:8008/images/二手转卖展示页-Sh_resale/构建之法.jpg',
						]
					},
					{
						no: "X05",
						userName: "王小萌",
						userWx: "wang_xiaoM",
						phone: "15280069543",
						Ftime: "2022年4月10日 09:23",
						price: "￥60.00",
						detail: "好东西，自己本人用多买了。",
						Xztype:2,//闲置商品分类
						type: 3,//闲置
						lostImg: [
							"http://124.222.72.174:8008/images/二手转卖展示页-Sh_resale/记笔记.png",
							"http://124.222.72.174:8008/images/二手转卖展示页-Sh_resale/记笔记.png",
							"http://124.222.72.174:8008/images/二手转卖展示页-Sh_resale/记笔记.png",
						],
						like_value: "9",
						watch_value: "16",
					},
					{
						no: "X01",
						userName: "一只可爱的哒哒",
						userWx: "QQQ54941",
						phone: "15528766540",
						Ftime: "2022年4月08日 18:34",
						price: "￥20.00",
						detail: "998带回家，东西很不错，喜欢的看看",
						Xztype:4,
						type: 3,
						lostImg: [
							"http://124.222.72.174:8008/images/闲置图片-xz/闲置图01.jpg",
							"http://124.222.72.174:8008/images/闲置图片-xz/闲置图02.jpg",
							"http://124.222.72.174:8008/images/闲置图片-xz/闲置图03.jpg",
						],
						like_value: "5",
						watch_value: "10",
					}
				],
				height: 120,
			};
		},
		onLoad() {
			this.Fwsum=this.LostFountList.length
		},
		methods: {
			OnquAndmai(val) {
				this.GreadId = val
				this.Fwsum=0
				this.LostFountList.forEach((item, value, arr) => {
					if (val === 0) {
						this.Fwsum++
					} else if (item.type === 3 && val === 1) {
						this.Fwsum++
					} else if (item.type === 1 && val === 2) {
						this.Fwsum++
					} else if (item.type === 2 && val === 2) {
						this.Fwsum++
					} 
					
				})
			},
			//编辑	
			Bjtext(item){
				console.log(item)
				//向编辑页面传递数据
				uni.setStorage({
					key: 'Bj',
					data: item,
					success: function() {
						console.log("向下级发送：" + item)
					}
				})
				uni.navigateTo({
					url:"./BjtextTo"
				})
			},
			//删除
			deltext(item){
				const that=this
				uni.showModal({
					title: '删除提示',
					content: '确定删除该内容吗?',
					cancelText: "取消",
					confirmText: "确定",
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							//删除当前数组里的值 并且删除数据库内相应的数据
							console.log(item)
							let index=that.LostFountList.findIndex(val=>val.no===item.no)
							index !==-1 && that.LostFountList.splice(index,1)
							//数据库也跟着删除
							
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				console.log(item)
			},
			//动态加载
			getmo() {
				this.LostFountList.push({
					no: "X01",
					userName: "一只可爱的哒哒",
					userWx: "QQQ54941",
					phone: "15528766540",
					Ftime: "2022年4月08日 18:34",
					price: "￥20.00",
					detail: "998带回家，东西很不错，喜欢的看看",
					Xztype:4,
					type: 3,
					lostImg: [
						"http://124.222.72.174:8008/images/闲置图片-xz/闲置图01.jpg",
						"http://124.222.72.174:8008/images/闲置图片-xz/闲置图02.jpg",
						"http://124.222.72.174:8008/images/闲置图片-xz/闲置图03.jpg",
					],
					like_value: "5",
					watch_value: "10",
				})
			}
			
		},
		onReachBottom() {
			console.log("触底啦")
			this.status = 'loading'
			const that = this;
			setTimeout(function() {
				that.pageNum++,
					that.getmo()
			}, 1000);
		
		},

	}
</script>

<style lang="scss">
	//头部样式
	.header_bt_01 {
		height: 115rpx;
		background-color: #FFFFFF;
		border-bottom: 2px solid #F7F7F7;

	}

	//头部样式--头像
	.hander_tx {
		width: 90rpx;
		height: 90rpx;
		border-radius: 100px;
		margin: 0px 0px 0px 8px;
	}

	//头部样式--取消字体 白色
	/deep/ .uni-searchbar__cancel {
		padding-left: 10px;
		line-height: 36px;
		font-size: 14px;
		color: #f3f3f3;
	}

	//顶部导航栏
	.Run_1 {
		border-width: 0px;
		position: absolute;
		left: 24rpx;
		top: 0px;
		width: 700rpx;
		height: 80rpx;
		display: flex;
		background-color: #FFFFFF;
		text-align: center;
	}

	.Run_1_1,
	.Run_1_2 {
		width: 325rpx;
	}

	//顶部导航栏 文本样式
	.Run_2,
	.Run_3 {
		font-size: 20px;
		font-family: "微软雅黑";
		height: 80rpx;
		line-height: 80rpx;
	}

	.head_Gle {
		background-color: rgba(81, 211, 211, 1);
		border-radius: 50rpx;
		font-family: "微软雅黑";
		color: seashell;
		font-weight: 700;
		font-style: italic;
		letter-spacing: normal;
		box-shadow: 5px 10px 20px #51d3d3;
	}

	//底部校园状态样式
	.uni_bottor_xz_2 {
		position: relative;
	}

	//头像
	.uniBt_tx1 {
		border-width: 0px;
		position: absolute;
		left: 0px;
		top: 0px;
		width: 90rpx;
		height: 90rpx;
		border-radius: 100px;
		font-weight: 900;
		font-style: normal;
		font-size: 26px;
		color: #FFFFFF;
		background-color: #D9001B;
	}

	//头像
	.uniBt_tx2 {
		border-width: 0px;
		position: absolute;
		left: 0px;
		top: 0px;
		width: 90rpx;
		height: 90rpx;
		border-radius: 100px;
		font-weight: 900;
		font-style: normal;
		font-size: 26px;
		color: #FFFFFF;
		background-color: #1ABC9C;
	}

	//头像
	.uniBt_tx3 {
		border-width: 0px;
		position: absolute;
		left: 0px;
		top: 0px;
		width: 90rpx;
		height: 90rpx;
		border-radius: 100px;
		font-weight: 900;
		font-style: normal;
		font-size: 26px;
		color: #FFFFFF;
		background-color: #1ABBEA;
		;
	}

	//昵称
	.uniBt_Name {
		border-width: 0px;
		position: absolute;
		left: 116rpx;
		top: 12rpx;
		width: 300rpx;
		height: 54rpx;
		display: flex;
		font-family: '仿宋 Bold', '仿宋';
		font-weight: 700;
		font-style: normal;
		font-size: 16px;
	}

	//时间
	.uniBt_Time {
		border-width: 0px;
		position: absolute;
		left: 116rpx;
		top: 66rpx;
		width: 400rpx;
		height: 50rpx;
		display: flex;
		color: #A8A5A5;
		font-size: 13px;
	}

	//按钮
	.uniBt_but {
		border-width: 0px;
		position: absolute;
		left: 452rpx;
		top: 23rpx;
		width: 202rpx;
		height: 56rpx;
		background: inherit;
		background-color: rgba(217, 0, 27, 0.682352941176471);
		border: none;
		border-radius: 14px;
	}

	//内部2 
	.uni_bottor_xz_4 {
		position: relative;
	}

	//标题
	.nuiBt_title {
		border-width: 0px;
		left: 170rpx;
		top: 10rpx;
		width: 200rpx;
		height: 34rpx;
		display: flex;
		font-size: 16px;
		padding: 5px;
		position: absolute;
		font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
		font-weight: 700;
		font-style: normal;
		font-size: 15px;
		color: #797979;
	}

	//内容
	.nuiBt_text {
		//position: absolute;
		width: 320rpx;
		height: 120rpx;
		font-size: 13px;
		display: inline-block;
		font-family: "微软雅黑";
		padding: 5px;
		margin-top: 60px;
	}

	//右侧图片
	.nuiBt_img {
		border-width: 0px;
		position: absolute;
		left: 320rpx;
		top: 10px;
		width: 250rpx;
		height: 300rpx;
		display: flex;
	}

	//右侧价格
	.nuiBt_Money {
		position: absolute;
		left: 400rpx;
		top: 240rpx;
		width: 160rpx;
		height: 36rpx;
		display: flex;
		color: #E55163;
	}

	//物品名
	.wPname {
		border-width: 0px;
		position: absolute;
		left: 10rpx;
		top: 20rpx;
		width: 160rpx;
		height: 66rpx;
		display: flex;
		font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
		font-weight: 700;
		font-style: normal;
		font-size: 16px;
		color: #D9001B;
	}

	.Wpxq {
		border-width: 0px;
		position: absolute;
		left: 10rpx;
		top: 70rpx;
		width: 160rpx;
		height: 66rpx;
		display: flex;
		font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
		font-weight: 700;
		font-style: normal;
		font-size: 16px;
		color: #D9001B;
	}

	//编辑 删除按钮样式
	//删除
	.BjBunn1 {
		width: 100px;
		height: 32px;
		border: 2px solid red;
		color: red;
		margin-right: 10px;
		float: right;
		margin-bottom: 10px;
	}

	.BjBunn2 {
		width: 100px;
		height: 32px;
		border: 2px solid #51d3d3;
		color: #51d3d3;
		float: right;
	}

	.bor1 {
		color: black;
		width: 150px;
		height: 50px;
		font-size: 14px;
	}

	.bor2 {
		color: red;
		width: 150px;
		height: 20px;
		margin-top: 25px
	}

	.bor3 {
		position: absolute;
		top: 100px;
		color: #999999;
		left: 10px;
		font-size: 13px;
	}
</style>
